{% extends 'backend.html.twig' %}

{% block body %}
    <div id="wrapper">
        <div id="container">
            <label>Name</label>
            <input id="input_name"/><br>
            <label>Description</label>
            <textarea id="input_description"></textarea><br>
            <label>Customer Name</label>
            <input id="input_customer_name"/><br>
            <button id="add_material">Add material</button>
            <button id="clear_material">Clear material</button>
            <ul id="material_container">
            </ul>
            <hr>
            <button id="submit">Submit</button>
        </div>
    </div>
{% endblock %}
{% block javascripts %}
    <script>
        (function ($) {
            $(function () {
                var select_content = "";
                var material_map = {};
                var flag = true;
                var material_container = $("#material_container");

                $("#clear_material").click(function () {
                    material_container.empty();
                });
                $("#add_material").click(function () {
                    if (!select_content) {
                        $.ajax({
                            async: false,
                            url: "{{ asset("material/map") }}",
                            method: "GET",
                            success: function (res) {
                                if (res.code === 0) {
                                    material_map = res.data;
                                    select_content = "<select id='material_select'>";
                                    for (var x in material_map) {
                                        select_content += "<option value=" + x + ">" + material_map[x]["name"] + "</option>";
                                    }
                                    select_content += "</select>";
                                    flag = true;
                                } else {
                                    flag = false;
                                    return layer.msg(res.message);
                                }
                            }
                        });
                    }
                    flag && layer.open({
                        title: 'Add Material',
                        content: select_content,
                        yes: function () {
                            var mid = $("#material_select").val();
                            var mname = material_map[mid].name;
                            if ($("[data-mid=" + mid + "]").length) {
                                return layer.msg("Material " + mname + " exist");
                            }
                            material_container.append('<li data-mid="' + mid + '">' + mname + '</li>');
                            layer.closeAll();
                        }
                    });
                });
                $("#submit").click(function () {
                    var mlist = material_container.find("li");
                    var materials = "";
                    var mlistlen = mlist.length;
                    while (mlistlen-- > 0) {
                        var li = mlist.eq(mlistlen);
                        materials += li.attr("data-mid") + ",";
                    }

                    $.post("{{ asset("product/create") }}", {
                        name: $("#input_name").val(),
                        description: $("#input_description").val(),
                        customer_name: $("#input_customer_name").val(),
                        materials: materials
                    }, function (res) {
                        if (!res.code) {
                            location.href = "{{ asset("product/overview") }}";
                        } else {
                            return layer.confirm(res.message + "<br>Going to create material order?", function (r) {
                                if (r) {
                                    location.href = "{{ url("material_order_overview") }}";
                                }
                            })
                        }
                    });
                });
            });
        })(jQuery);
    </script>
{% endblock %}
